<template>
    <div class="newsinfo_container">
        <h1 class="newsinfo_title">{{newsInfo.title}}</h1>
        <p class="newsinfo_subtitle">
            <span>发表时间:{{newsInfo.add_time}}</span>
            <span>点击{{newsInfo.click}}次</span>
        </p>
        <div v-html="newsInfo.content">
            
        </div>
        <comment></comment>
    </div>
</template>

<script>
import comment from "../subcomponents/comment.vue"
export default {
    data(){
        return {
            newsInfo:{}
        }
    },
    created(){
        this.getNewsInfo()
    },
    methods:{
        getNewsInfo(){
            this.axios.get("./json/newsInfo/1.json").then(result=>{
               this.newsInfo=result.data[this.$route.params.id-1]
            })
        }
    },
    components:{
        comment
    }
}
</script>

<style lang="scss" scoped>
.newsinfo_container{
    padding: 0 4px;
    .newsinfo_title{
        color: red;
        font-size: 16px;
        text-align: center;
        margin: 10px 0;
    }
    .newsinfo_subtitle{
        color: #66CCFF;
        display: flex;
        justify-content: space-between;
    }
}
</style>